<template>
  <div class="userCover" :style="{'background-image':'url(' + cover + ')','background-repeat':'no-repeat','background-size':'100% 100%'}">
    <div class="cover-top" v-show="showAbs">
      <div class="cover-left">
        <i class="iconfont icon-zuobian"></i>
      </div>
      <div class="cover-right">
        <i class="iconfont icon-gengduo" @click="openDialog"></i>
      </div>
    </div>
    <div class="detail-top"
         v-show="!showAbs"
         :style="opacityStyle"
    >
      <div class="cover-left">
        <router-link :to="'/'">
          <i class="iconfont icon-zuobian"></i>
        </router-link>
      </div>
      <div class="detail-title">
        <h1>渟说</h1>
      </div>
      <div class="cover-right">
        <i class="iconfont icon-gengduo" @click="openDialog"></i>
      </div>
    </div>
    <div class="cover-content">
      <div class="cover-content-left">
        <div class="userAvatar">
          <img :src="cover" alt="">
        </div>
        <div class="userData">
          <p class="userDataName">{{title}}</p>
          <p><em>{{follow_total}}个人加入</em><span>{{feed_total}}条听说</span></p>
          <p class="userDataText">{{introduction}}</p>
        </div>
      </div>
      <!--<div class="cover-content-right">-->
        <!--<button type="button" class="btn btn-primary"><i class="iconfont icon-jiahao"></i>加入</button>-->
        <!--<button type="button" class="btn btn-light" v-show="isjoin"><i class="iconfont icon-dagou1"></i>已加入</button>-->
      <!--</div>-->
    </div>
    <my-eject :isShow="isShowShareDialog" @on-close="closeDialog('isShowShareDialog')">
      <share></share>
    </my-eject>
  </div>

</template>

<script>
import MyEject from '../../detail/components/eject'
import share from '../../detail/components/share'
import axios from 'axios'

export default {
  components: {
    share,
    MyEject
  },
  data () {
    return {
      isjoin: false,
      cover: '',
      title: '',
      introduction: '',
      follow_total: '',
      feed_total: '',
      isShowShareDialog: false,
      opacityStyle: {
        opacity: 0
      },
      showAbs: true
    }
  },
  methods: {
    openDialog () {
      this.isShowShareDialog = true
    },
    closeDialog (attr) {
      this[attr] = false
    },
    getHomeCover () {
      axios({
        method: 'get',
        url: '/api/record.json',
        params : {
          url: 'http://api.sns.sunnycare.cc/v1/group/content'
        },
        data: {
          group_id: 'G00001'
        }
      }).then(this.getHomeCoverSucc)
    },
    getHomeCoverSucc (res) {
      res = res.data
      if (res.code && res.data) {
        const data = res.data
        this.cover = res.data.cover
        this.title = res.data.title
        this.introduction = res.data.introduction
        this.follow_total = res.data.follow_total
        this.feed_total = res.data.feed_total
      }
    },
    handleScroll () {
      const top = document.documentElement.scrollTop
      if (top > 40) {
        let opacity = top / 150
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
        this.showAbs = false
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  },
  mounted () {
    this.getHomeCover()
    window.addEventListener('scroll',this.handleScroll)
  },
  unmounted () {
    window.removeEventListener('scroll',this.handleScroll)
  },
  // activated () {
  //   window.addEventListener('scroll',this.handleScroll)
  // }
}
</script>

<style scoped>
  .userCover {
    background-size: 100% auto;
    height: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .userCover:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    filter: blur(4px);
    z-index: 2;
  }

  .cover-top {
    display: flex;
    align-items: center;
    z-index: 9;
    height: 40px;
    justify-content: space-between
  }

  .cover-top .cover-left {
    display: flex;
    justify-content: flex-start;
    padding-left: 12px;
  }

  .cover-top .cover-right {
    display: flex;
    justify-content: flex-end;
    padding-right: 12px;
  }

  .cover-top > div > i {
    font-size: 20px;
    color: #fff;
    background-color: rgba(0,0,0,.8);
    border-radius: 4rem;
    /*padding: 12%;*/
  }

  .cover-content {
    position: absolute;
    z-index: 9;
    bottom: 15%;
    padding: 0 4%;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .cover-content-left {
    display: flex;
  }

  .userAvatar {
    width: 90px;
    height: 90px;
    border: 3px #efefef solid;
    display: flex;
    justify-content: flex-start;
  }

  .userAvatar > img {
    max-width: 100%;
    height: auto;
  }

  .userData {
    display: flex;
    width: 60%;
    flex-direction: column;
    margin-left: 12px;
  }

  .userData > p {
    font-size: 12px;
    color: #efefef;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 0;
    line-height: 24px;
  }

  .userData > p > em {
    font-style: normal;
    margin-right: 12px;
  }

  .userData > .userDataName {
    font-size: 16px;
  }

  .userData > .userDataText {
    font-size: 10px;
    line-height: 12px;
    margin-top: 12px;
  }

  .cover-content-right {
    display: flex;
    align-items: center;
  }

  .detail-title > h1 {
    font-size: 16px;
    color: #fff;
  }

  .detail-top {
    display: flex;
    align-items: center;
    z-index: 99;
    height: 40px;
    justify-content: space-between;
    background-color: #4dc6ff;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
  }

  .detail-top .cover-left {
    display: flex;
    justify-content: flex-start;
    padding-left: 12px;
  }

  .detail-top .cover-left > a{color: #ffffff;}

  .detail-top .cover-right {
    display: flex;
    justify-content: flex-end;
    padding-right: 12px;
  }

  .detail-top > div > i {
    font-size: 20px;
    color: #fff;
    /*padding: 12%;*/
  }
</style>
